<template>
    <div class="onLine-container">
      <div class="infoSales-container-item">
        <div class="channel-detail-select space-between">
          <div style="text-align: right">
            <el-date-picker @change="dateSelect" v-model="value6" type="daterange" value-format="yyyy-MM-dd"
                            range-separator="至" size="mini" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
        <circle-compent :detailCatagrayCount="detailCatagrayCount" :detailProductCount="detailProductCount"
                        :detailOnLine="detailOnLine" :detailOffLine="detailOffLine" :titleName="titleName"></circle-compent>
        <div>
          <div class="tableContainer">
            <el-table :data="channelsReault" style="width: 100%" size="mini">
              <el-table-column
                width="80px"
                prop="channelId"
                label="平台编号">
              </el-table-column>
              <el-table-column
                prop="channelName"
                label="平台名称">
              </el-table-column>
              <el-table-column
                prop="categoryNumber"
                label="品类数(个)">
              </el-table-column>
              <el-table-column
                prop="skuNumber"
                label="SKU数(人)">
              </el-table-column>
              <el-table-column
                prop="salesAverageCount"
                label="月均销量(件)">
              </el-table-column>
              <el-table-column
                sortable
                prop="salesAverageAmount"
                label="月均销额(万元)">
              </el-table-column>
              <el-table-column label="操作" width="100px">
                <template slot-scope="scope">
                  <div class="opreator" @click="detailRowSet(scope.row.channelId)">查看详情</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="paginationSet">
            <div class="pagination-container">
              <div class="toStart" @click="getListPage(1)">首页</div>
              <el-pagination background @current-change="getListPage" layout="prev, pager, next" :current-page.sync="currentPage" :total="totalRecord">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <!--  详情Dialog  -->
      <detail-dialog :key="channelId" :showdialog.sync="detailDialogTableVisible" :channelId="channelId" online="online"></detail-dialog>
    </div>
</template>

<script>
    import CircleCompent from 'router/marketSale/compentSet/circleCompent'
    import mixins from 'utils/mixin'
    import DetailDialog from './detailDialog'
    import * as opreator from 'api/getData'
    const currentYear = new Date().getFullYear()
    const currentMonth = new Date().getMonth() + 1
    const currentMonthstr = currentMonth < 10 ?  `0${currentMonth}` : `${currentMonth}`
    const startDate = `${currentYear-1}-${currentMonthstr}`
    const endDate = `${currentYear}-${currentMonthstr}`

    export default {
      name: "on-line",
      components:{
        CircleCompent,
        DetailDialog
      },
      data(){
        return{
          channelsReault:[],
          detailCatagrayCount: '',
          detailProductCount: '',
          detailOnLine: '',
          detailOffLine: '',
          titleName:[
            '品类数（个）',
            'SKU数（人）',
            '月均销量（万件）',
            '月均销额（万元）'
          ],
          currentPage:1,
          totalRecord: 1,
          detailDialogTableVisible:false,
          channelId:'',
          totalCount:'',
          value6:[startDate+'-01',new Date().format('yyyy-MM-dd')],
          startDate:startDate+'-01',
          endDate:new Date().format('yyyy-MM-dd')
        }
      },
      props:['channelNum1'],
      mounted(){
        this.getData(this.startDate,this.endDate)
        this.getListPage()
      },
      methods:{
        channelSels(){
          this.getListPage()
        },
        getData(firstTime,lastTime){
          let param = {
            firstTime:firstTime,
            lastTime:lastTime
          }
          opreator.circleNum(param).then(res => {
            this.detailCatagrayCount = res.data.onlineCategoryCount
            this.detailProductCount = res.data.onlineSkuCount
            this.detailOnLine = ( res.data.onlineAverageCount/10000).toFixed(2)
            this.detailOffLine = (res.data.onlineAverageAmount/10000).toFixed(2)
            this.$emit('update:channelNum1', res.data.onlineChannelCount)
          })
        },
        getListPage(pageNumber = 1){
          opreator.onlineShop({
            firstTime: this.startDate,
            lastTime: this.endDate,
            pageNumber: pageNumber
          }).then(res => {
            let { totalRecord = 0, list = [], currentPage = 0 } = res.data || []
            this.channelsReault = list.map(v => {
              return { ...v, salesAverageAmount: Number(v.salesAverageAmount || '0.00')}
            })
            this.currentPage = currentPage
            this.totalRecord = totalRecord
          })
        },
        dateSelect(val){
          this.startDate = val[0]
          this.endDate = val[1]
          this.getData(val[0],val[1])
          this.getListPage()
        },
        detailRowSet(id){
          this.detailDialogTableVisible = true
          this.channelId = id.toString()
        }
      }
    }
</script>

<style scoped>

</style>
